<template>
  <div class="">
    <div id="main" :style="{ width: '500px', height: '500px' }"></div>
  </div>
</template>

<script>
var echarts = require("echarts");

export default {
  data() {
    return {
      option: {
        angleAxis: {},
        radiusAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四"],
          z: 10,
        },
        polar: {},
        series: [
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "A",
            stack: "a",
          },
          {
            type: "bar",
            data: [2, 4, 6, 8],
            coordinateSystem: "polar",
            name: "B",
            stack: "a",
          },
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "C",
            stack: "a",
          },
        ],
        legend: {
          show: true,
          data: ["A", "B", "C"],
        },
      },
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption(this.option);
  },
  methods: {},
};
</script>

<style lang="scss"></style>
